<template>
  <div class="map" ref="myChart"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { mapData } from "@/apis/echartsData/echartData.js";
import isBase64 from "is-base64";
import { Base64 } from "js-base64";
const myChart = ref(null);
const base64ToStr = (base64Str) => {
  if (isBase64(base64Str)) {
    return Base64.decode(base64Str);
  }
  return base64Str;
};

onMounted(() => {
  let ECharts = echarts.init(myChart.value);
  ECharts.showLoading();
  mapData().then((res) => {
    ECharts.hideLoading();
    // 解码数据成json
    echarts.registerMap("chinaMap", base64ToStr(res.data));
    let option = {
      title: {
        text: "城市销量",
        top: 20,
        left: "center",
        textStyle: {
          color: "#fff",
          fontSize: 20,
          textShadowBlur: 10,
          textShadowColor: "#33ffff",
        },
      },
      geo: {
        top: 190,
        type: "map",
        map: "chinaMap",
        zoom: 1.5,
        label: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 15,
          },
        },
        itemStyle: {
          areaColor: "#0099ff",
          borderColor: "#00ffff",
          shadowColor: "rgba(230,130,70,0.5)",
          shadowBlur: 30,
          emphasis: {
            focus: "self",
          },
        },
      },
      tooltip: {
        trigger: "item",
      },
      visualMap: {
        type: "continuous",
        min: 100,
        max: 5000,
        calculable: true,
        inRange: {
          color: ["#50a3ba", "#eac736", "#d94e5d"],
        },
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          type: "scatter",
          itemStyle: {
            color: "red",
          },
          coordinateSystem: "geo",
          data: [
            {
              name: "北京",
              value: [116.46, 39.92, 4367],
            },
            {
              name: "上海",
              value: [121.48, 31.22, 8675],
            },
            {
              name: "深圳",
              value: [114.07, 22.62, 2461],
            },
            {
              name: "广州",
              value: [113.23, 23.16, 187],
            },
            {
              name: "西安",
              value: [108.45, 34, 3421],
            },
          ],
        },
        {
          type: "effectScatter", //涟漪效果散点图
          coordinateSystem: "geo",
          data: [
            {
              name: "南京",
              value: [118.22, 31.14, 3567],
            },
          ],
          rippleEffect: {
            number: 3,
            scale: 4,
          },
        },
      ],
    };
    ECharts.setOption(option);
  });
});
</script>

<style lang="less" scoped>
.map {
  width: 800px;
  height: 700px;
}
</style>